import "./Connect.scss"
import TrackVisibility from 'react-on-screen';
import axios from "axios";

interface Msg {
  title: string;
  value: string;
}
interface MsgRequestData {
  status: string,
  data: {
    data: Msg[],
    results: number
  }
}

const Connect = memo(() => {
  const [msgArr, setMsgArr] = useState<Msg[]>([])
  useEffect(() => {
    axios.get<MsgRequestData>("/api/msgs").then(res => {
      const data = res.data.data
      setMsgArr(data.data)
    })
  }, [])

  return (
    <section className="connect-com" id="connect">
      <div className="container">
        <img className="contact-img" src="/img/contact-img.svg" alt="img load error" />
        <div className="msg-box">
          <div className="title">Get In Touch</div>
          <div className="show-msg">
            <TrackVisibility once>
              {({ isVisible }) =>
              (
                msgArr.map((v, i) => (
                  <p key={i} className={isVisible ? "active" : ""}>{v.title}: <span>{v.value}</span></p>
                ))
              )
              }
            </TrackVisibility>
          </div>
        </div>
      </div>
    </section>
  )
})

export default Connect
